export interface UseMarquee {
    /**
     * 刷新速度
     */
    speed: number;
}


/**
 * 垂直跑马灯：数据列表自下而上滚动
 */
export function useMarquee(props: UseMarquee) {

    /**
     * 允许滚动的容器
     */
    let container: HTMLElement = undefined;

    /**
     * 滚动速度（像素/秒）
     */
    const speed: number = 0.5 || props.speed;
    /**
     * 起始高度
     */
    let position: number = 0;

    /**
     * 暂停滚动
     */
    let isAutoScrolling: boolean = true;
    /**
     * 滚动计时
     */
    let autoScrollTimer;
    /**
     * 滚动计时函数
     */
    let userScrollTimeout;

    // 自动滚动函数
    const startAutoScroll = () => {
        if (!isAutoScrolling) return;

        const height = container.scrollHeight;

        position += speed;
        if (position < height) {
            container.scrollTop = position;
            autoScrollTimer = requestAnimationFrame(startAutoScroll);
        } else {
            // 回到起点，第一帧需要停留一会儿，避免看不到第一行的数据
            position = 0;
            container.scrollTop = position;
            setTimeout(() => {
                autoScrollTimer = requestAnimationFrame(startAutoScroll);
            }, 3000);
        }
    }
    /**
     * 用户滚动时暂停自动滚动
     */
    const handleUserScroll = () => {
        // 暂停自动滚动
        isAutoScrolling = false;
        cancelAnimationFrame(autoScrollTimer);

        // 清除之前的恢复计时器
        if (userScrollTimeout) {
            clearTimeout(userScrollTimeout);
        }

        // 3秒后恢复自动滚动
        userScrollTimeout = setTimeout(() => {
            isAutoScrolling = true;
            startAutoScroll();
        }, 3000);
    }

    /**
     * 完成 dom 事件绑定
     * @param dom HTML 容器
     */
    const bind = (dom: HTMLElement) => {
        container = dom;

        container.addEventListener('wheel', handleUserScroll);
        container.addEventListener('touchmove', handleUserScroll);

        startAutoScroll();
    }

    /**
     * 接触 dom 事件
     */
    const unbind = () => {
        container.removeEventListener('wheel', handleUserScroll);
        container.removeEventListener('touchmove', handleUserScroll);
    }

    return {bind, unbind, handleUserScroll, startAutoScroll}
}